<template>
    <div  class="tabbaritem" @click="itemclick">
        <div v-if="!isActive">  <slot name="item-icon" ></slot></div>
       <div v-else> <slot name="item-icon-active" ></slot></div>
        <div :class="{active:isActive}" :style="activeStyle">
            <slot name="item-title" ></slot>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            // isActive:true
        }
    },
    computed:{
        isActive() {
            return this.$route.path.indexOf(this.path) !== -1
        },
        activeStyle () {
            return this.isActive?{color:this.activeColor} :{}
        }
    },
    props:{
        path:String,
        activeColor:{
            type:String,
            default:"red"
        }
    }
    ,
    methods:{
        itemclick() {
            // this.$router.push(this.$router.path)
            
            // console.log(this.path);
            // console.log(this.$route);
            
            this.$router.push(this.path)
            // this.$router.push(this.$route.path)
            // console.log(this.$route.path);
            
            
        }
    }
}
</script>

<style>
    .tabbaritem {
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tabbaritem img {
        width: 30px;
        height: 30px;
    }
</style>